<!--  -->
<script setup>

import { loading, done, fail } from './index'

</script>

<template>
  <div class="loading-wrapper">
    <div class="loading-bar" :style="{ width: `${loading}%`}"
      :class="{ 'loading-fail': fail(), 'loading-done': done() }">
    </div>
  </div>
</template>

<style scoped lang="scss">
.loading-wrapper {
  width: 100%;
  position: sticky;
  z-index: 10000;
  top: 0;
  background-color: #8db188;
}

.loading-bar {
  background-color: #0fe2c9;
  height: 2px;
  width: 0;
  transition: all .25s linear, opacity 1s linear;
}

.loading-fail {
  background-color: #ff0000;
}

.loading-done {
  opacity: 60%;
  background-color: #0059ff;
}
</style>
